<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-row>
          <el-form-item label="项目编号:">
            <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="query.projectName" clearable placeholder="项目名称"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
            </el-button>
            <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="btn-operate">
<!--        <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">-->
<!--        编写工作底稿-->
<!--      </el-button>-->
      </div>
      <el-table v-loading="loading" ref="table" :data="data" border
                header-row-class-name="container-table-header"
                highlight-current-row class="current-page"
                size="small" stripe style="width: 100%;margin-bottom: 20px;"
                :row-key="rowKeyMethod"
                @row-click="handleRowClick">
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-table
              :data="props.row.projectPaperDTOS"
              style="width: 100%"
              :row-key="rowKeyMethod1"
            >
              <el-table-column label="审计事项" prop="auditMatter"></el-table-column>
              <el-table-column label="审计过程" prop="auditProcess" show-overflow-tooltip></el-table-column>
              <el-table-column label="疑点数量" prop="pointCount" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="215">
                <template slot-scope="scope">
                  <el-button v-if="permissions.project_paper_get" type="text" size="small" icon="el-icon-view" @click="showViewBox(scope.row)">查看
                  </el-button>
                  <el-button v-if="permissions.project_paper_add" type="text" size="small"  icon="el-icon-edit" @click="showEditBox(scope.row)">编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" prop="projectCode">
        </el-table-column>
        <el-table-column label="项目名称" prop="projectName">
        </el-table-column>
        <el-table-column label="工作底稿数量" prop="projectPaperCount">
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          :current-page="page.current"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
               :append-to-body="true" :before-close="closeViewBox" width="1200px">
      <el-form ref="dataForm" :model="form" class="el-dialog__body" label-width="100px">
      <div class="ledgerTitle">基本信息</div>
      <el-row>
        <el-col>
          <el-form-item label-width="100px"  label="审计事项:" prop="auditMatter">
            <pre class="pre-style">{{ form.auditMatter }}</pre>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label-width="100px"  label="审计过程:" prop="auditProcess">
            <pre class="pre-style">{{ form.auditProcess }}</pre>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label-width="100px"  label="审计认定的事实摘要及审计结论:" prop="auditConclusion">
            <pre class="pre-style">{{ form.auditConclusion }}</pre>
          </el-form-item>
        </el-col>
      </el-row>
        <div class="ledgerTitle">疑点信息</div>
        <el-row>
          <el-col>
            <el-table
              ref="table"
              :data="tableData"
              :model="tableData"
              style="width: 80%;margin-left: auto; margin-right: auto;"
              max-height="450"
              highlight-current-row
            >
              <!--                    <el-table-column type="selection" width="55" align="center"></el-table-column>-->
              <el-table-column label="序号" width="100">
                <template #default="{ $index }">
                  <span>{{ $index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="疑点编号" width="200">
                <template #default="{ row }">
                  {{row.pointCode}}
                </template>
              </el-table-column>
              <el-table-column label="是否落实" width="100">
                <template #default="{ row }">
                  {{row.fix | yesOrNo}}
                </template>
              </el-table-column>
              <el-table-column label="是否发现" width="100">
                <template #default="{ row }">
                  {{row.discovery | yesOrNo}}
                </template>
              </el-table-column>
              <el-table-column label="疑点描述">
                <template #default="{ row }">
                  {{row.pointDesc}}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      <div class="ledgerTitle">工作底稿文书</div>
        <el-row >
          <el-col :span="24">
            <el-form-item label-width="100px" label="工作底稿:" prop="projectName">
              <web-document :form-data="form" readWord="view" :pageType="'worksheet'"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeViewBox" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>

    <table-form ref="addOrUpdate" @cancelDialog="closeDoubtfulDialog"></table-form>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import FormTransfer from "@/components/form/transfer";
import TableForm from "@/components/form/worksheetForm";
import WebDocument from '@/components/form/webDocument.vue';
import {delObj, fetchList, getObj, submit, fetchListByProject,listPaperByProjectId} from "@/api/adis/execute/paper";

export default {
  components: {
    TableForm,
    FormTransfer,
    WebDocument,
  },
  dictTypes: ['project_progress', 'project_source'],
  data() {
    return {
      ls: {
        'background': 'white'
      },
      importBox: false,
      viewBox: false,
      formBox: false,
      formTitle: '',
      loading: false,
      showStartDate: false,
      // 控制实施时间输入框的显示与否
      showEndDate: false,
      multiple: false,
      transferDialog: false,
      transferDialogType: '',
      transferDialogTypeArr: [],
      selectedRowsId: '',
      query: {},
      form: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      Authorization: '',
      fileList: [], // 文件
      tableData:[],
      expandedRow: {},
    }
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  created() {
    this.onLoad(this.page);
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  methods: {
    handleRowClick(row, event) {
      this.query.projectId = row.projectId;
      listPaperByProjectId(this.query).then(res => {
        this.$set(row, 'projectPaperDTOS', res.data.data);
        // 使用$refs调用toggleRowExpansion方法，但 Element UI 默认支持点击展开，此处可省略
        this.$refs.table.toggleRowExpansion(row,true);
        // this.$set(this, "expandedRow", row);
        // this.expandedRows.push(row)
        this.data.forEach(item => {
          if (item.projectId !== row.projectId) {
            this.$refs.table.toggleRowExpansion(item,false);
          }
        })
      })
    },
    rowKeyMethod(row) {
      // 使用唯一的 id 字段作为 row-key
      return row.projectId;
    },
    rowKeyMethod1(row) {
      // 使用唯一的 id 字段作为 row-key
      return row.paperId;
    },
    handleCellClick(row, column) {
      if (row && column.label !== "操作"){
        this.showViewBox(row)
      }
    },
    showViewBox(row) {
      getObj(row.paperId).then(response => {
        this.form = response.data.data;
        this.tableData = this.form.projectPointList;
        this.formTitle = this.form.projectName;
        this.viewBox = true;
      })
    },
    closeViewBox() {
      this.viewBox = false;
    },
    showEditBox(row) {
      this.addOrUpdateHandle(row.paperId);
    },
    // 新增 / 修改
    addOrUpdateHandle (paperId,type) {
      type = type ? type : false;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(paperId,type);
      })
    },
    closeDoubtfulDialog() {
      this.selectedRowsId = ''
      this.onLoad(this.page);
    },
    //  控制实施时间输入框的显示方法
    toggleDateConditions() {
      this.showStartDate = !this.showStartDate;
      this.showEndDate = !this.showEndDate;
    },
    submit() {
      this.$refs['optForm'].validate((valid) => {
        if (valid) {
          this.fileList && this.fileList.map((file) => {
            this.form.fileUrl = file.response ? file.response.data.url : file.url
          });
          this.loading = true;
          submit(this.form).then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.resetForm();
            this.onLoad(this.page);
          }, () => {
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    handleDelete(row) {
      this.$confirm("确定将选择的数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return delObj(row.renterId);
      })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    resetForm() {
      this.formBox = false;
      this.form = {};
      this.formTitle = '';
      this.$refs['optForm'] && this.$refs['optForm'].resetFields();
      this.viewBox = false;
    },
    onSearch() {
      // this.$refs.table.toggleRowExpansion(this.expandedRow);
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchListByProject(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.handleRowClick(this.data[0]);
      }, () => {
        this.loading = false;
      });
    },
    downloadWord: function(row) {
      this.downBlobFile(
        "/exam/execute/worksheet/downloadWord/"+ row.paperId,
        {},
        row.auditMatter + "工作底稿.docx"
      )
    },

    downWord() {
      if(!this.form.wordFile) {
        this.$message({
          type: "warning",
          message: "该项尚未上传相关文书!"
        });
        return;
      }
      const a = document.createElement('a');
      let url = this.form.wordFile;
      a.setAttribute('download', '');
      a.setAttribute('href', url);
      a.click();
    },
    openWord() {
      if(!this.form.wordFile) {
        this.$message({
          type: "warning",
          message: "该项尚未上传相关文书!"
        });
        return;
      }
      // this.$router.push({path:'/webOffice', query: {url: this.form.wordFile}})
      const { href } = this.$router.resolve({
        path: '/webOffice',
        query: {
          url: this.form.wordFile,
          type: this.isAudit ? 'edit' : 'view',
        }
      });
      window.open(href, '_blank');
    }
  }
};
</script>

<style>
/*修改展开按钮的样式 start*/
.current-page .el-table__expand-icon{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.current-page .el-table__expand-icon .el-icon-arrow-right:before{
  content: "";
}
.current-page .el-table__expand-icon--expanded .el-icon-arrow-right:before{
  content: "";
}
/*修改展开按钮的样式 end*/
</style>
